<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			单价：<input type="number" v-model.number="dj" />
			数量：<input type="number" v-model.number="sl" />
			<br /><br />
			computed总价：<p>{{count}}</p>
			methods总价：<p>{{sum()}}</p>
			<br /><br />
			<br /><br />
			<br /><br />
			watch监听<br />
			name:<input type="text" v-model="obj.name" />
			age:<input type="number" v-model.number="obj.age" />
			<br /><br />
			a：<input type="number" v-model.number="a" />
			obj1.a:<input type="text" v-model="obj1.a" />
			obj1.b:<input type="number" v-model.number="obj1.b" />
			<br /><br />
			<button @click="btnAction()">开始监听</button>
		</div>
	</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		//属性data
		data:{
			dj:"",
			sl:"",
			a:"",
			obj1:{
				a:"",
				b:""
			},
			obj:{
				name:"",
				age:""
			}
		},
		//计算属性computed，通过已有的data属性计算得来的属性
		//通过data的dj&&sl属性，返回计算相乘的值，得来的count属性
		//相关联的属性(data的dj&&sl)改变才会触发
		computed:{
			count(){
				return this.dj*this.sl;
			}
		},
		methods:{
			sum(){
				return this.dj*this.sl;
			},
			//某一刻开始监听
			btnAction(){
				//vm.$watch()在内部,vm改为this
				this.$watch("a",(newval,oldval)=>{
					console.log(newval);
					console.log(oldval);
				})
				this.$watch("obj1.a",{
					handler(newval,oldval){
						console.log(newval);
						console.log(oldval);
					},
					deep:true
				})
				this.$watch("obj1.b",function(newval,oldval){
					console.log(newval);
					console.log(oldval);
				})
			}
			
		},
		//属性变化就会触发监听watch
		watch:{
			dj(...rest){
				console.log(rest)
			},
			sl:function(newval,oldval){
				console.log(newval);
				console.log(oldval);
			},
			//监听对象的写法
			//写在obj:{}里面
			obj:{
				//必须用handler声明
				handler(newval,oldval){
					console.log(newval);
					console.log(oldval);
				},
				deep:true//深度监听
			},
			//监听对象中的某个属性
			"obj.name":function(newval,oldval){
				console.log(newval);
				console.log(oldval);
			}
		}
	})
	//监听的另外一种写法，$watch()向vue添加监听
	//vm.$watch("监听的data",function(){})
	/*
	vm.$watch("a",(newval,oldval)=>{
		console.log(newval);
		console.log(oldval);
	})
	vm.$watch("obj1.a",{
		handler(newval,oldval){
			console.log(newval);
			console.log(oldval);
		},
		deep:true
	})
	*/
</script>